import {useHistory} from 'react-router-dom';
import React from 'react';
import PageHeader from '@/components/page-header';
import styles from './index.less';
import {Button, Form, Input, notification, Upload} from 'antd';
import {CameraOutlined} from '@ant-design/icons';
import util from '@/utils';


const saveComplaint = async (complaint: { [key: string]: string | any }) => {
   const forms = new FormData();
   complaint.picture && forms.append('picture', complaint.picture.file);
   delete complaint.picture;
   forms.append('complaint', new Blob([JSON.stringify(complaint)], {type: 'application/json'}));
   const {code, data} = await util.request({
      url: `/complaint`,
      method: 'POST',
      data: forms
   }) as any;
   if (code === 200) {
      notification.open({
         message: '发送成功',
         type: 'success',
         duration: 0.8,
         closeIcon: false,
         style: {
            top: '25px'
         }
      });
   }
   return data;
};


export default function ComplaintPage() {
   const history = useHistory();

   return <div className={styles.layout}>
      <PageHeader
         onBack={() => history.goBack()}
         title='建议或投诉'
      />
      <div className={styles.title}>
         <h4>建议或投诉内容</h4>
      </div>

      <div className={styles.content}>
         <Form onFinish={(value) => {
            saveComplaint(value);
            history.goBack();
         }}>
            <Form.Item name='content' rules={[{required: true, message: '建议内容为必填项'}]}>
               <Input.TextArea rows={10} placeholder='请填写建议或投诉内容...' />
            </Form.Item>

            <Form.Item name='picture'>
               <Upload.Dragger name='picture' maxCount={1} beforeUpload={() => false}
                               accept='image/*'>
                  <p className='ant-upload-drag-icon'>
                     <CameraOutlined size={10} />
                  </p>
                  <p className='ant-upload-hint'>提交图片</p>
               </Upload.Dragger>
            </Form.Item>
            <Form.Item>
               <Button block type='primary' htmlType='submit'>
                  提交
               </Button>
            </Form.Item>
         </Form>
      </div>
   </div>;
}
